<template>
  <div>
    <div
      style="
        height: 40px;
        width: 100%;
        line-height: 36px;
        padding-left: 20px;
        color: white;
        border-top: 2px solid #111111;
        border-bottom: 2px solid #383d41;
      "
    >
      <span>{{
        "云台控制:" +
        (selectItem && selectItem.playerHeaderText
          ? selectItem.playerHeaderText
          : "未选摄像机") +
        "-" +
        (ptzEnable ? "云台启用" : "云台禁用")
      }}</span>
      <!-- <a-button size="small" style="margin-left: 20px;">隐藏</a-button> -->
    </div>
    <div style="padding: 7px 17px; height: 176px">
      <!-- <a-button type="primary" class="">Primary</a-button> -->
      <!-- <button class="transparentbtn" @click="ptzControl(1)" :disabled="ptzEnable?false:true"></button> -->
      <button
        class="btn arrow rotate1"
        @click="ptzControl(4)"
        :disabled="ptzEnable ? false : true"
      ></button>
      <button
        class="btn arrow"
        @click="ptzControl(0)"
        :disabled="ptzEnable ? false : true"
      ></button>
      <button
        class="btn arrow rotate2"
        @click="ptzControl(6)"
        :disabled="ptzEnable ? false : true"
      ></button>
      <button
        class="btn arrow rotate3"
        @click="ptzControl(2)"
        :disabled="ptzEnable ? false : true"
      ></button>
      <button
        class="transparentbtn"
        :disabled="ptzEnable ? false : true"
        style="font-size: 16px"
      >
        <span>方向</span>
      </button>
      <button
        class="btn arrow rotate4"
        @click="ptzControl(3)"
        :disabled="ptzEnable ? false : true"
      ></button>
      <button
        class="btn arrow rotate5"
        @click="ptzControl(5)"
        :disabled="ptzEnable ? false : true"
      ></button>
      <button
        class="btn arrow rotate6"
        @click="ptzControl(1)"
        :disabled="ptzEnable ? false : true"
      ></button>
      <button
        class="btn arrow rotate7"
        @click="ptzControl(7)"
        :disabled="ptzEnable ? false : true"
      ></button>
    </div>
    <div style="padding: 0px 17px; height: 34px">
      <button
        class="small btn"
        @click="ptzControl(9)"
        :disabled="ptzEnable ? false : true"
      >
        -
      </button>
      <button class="small transparentbtn" :disabled="ptzEnable ? false : true">
        变倍
      </button>
      <button
        class="small btn"
        @click="ptzControl(8)"
        :disabled="ptzEnable ? false : true"
      >
        +
      </button>
      <button
        class="small btn"
        @click="ptzControl(11)"
        :disabled="ptzEnable ? false : true"
      >
        -
      </button>
      <button class="small transparentbtn" :disabled="ptzEnable ? false : true">
        变焦
      </button>
      <button
        class="small btn"
        @click="ptzControl(10)"
        :disabled="ptzEnable ? false : true"
      >
        +
      </button>
    </div>
    <div v-if="showSpeed" style="padding: 0px 17px; height: 34px">
      <div style="float: left; height: 34px; line-height: 34px">慢</div>
      <div style="float: left; width: 235px; padding: 0 5px">
        <a-slider
          id="test"
          :min="0.1"
          :max="1"
          :step="0.1"
          v-model="speed"
          :disabled="ptzEnable ? false : true"
        />
      </div>
      <div style="float: right; height: 34px; line-height: 34px">快</div>
    </div>
    <div
      :style="
        'height: calc(100% - 250px - ' +
        (showSpeed ? 34 : 0) +
        'px);position: relative;cursor: default;'
      "
    >
      <div style="margin: 0 10px; position: absolute; height: 26px">
        <div style="float: left; margin-right: 10px">预置位</div>
        <!-- <a @click="positionAdd()"><a-icon type="plus-circle" style="font-size: 20px;float: left;"/></a> -->
        <a-popconfirm
          :disabled="ptzEnable ? false : true"
          placement="leftBottom"
          @confirm="() => positionAdd()"
          @visibleChange="(v) => visibleChange(v)"
        >
          <template slot="title">
            <p>添加预置位</p>
            <a-input placeholder="输入预置位名" v-model="posiName" />
          </template>
          <a :disabled="ptzEnable ? false : true"
            ><a-icon type="plus-circle" style="font-size: 20px; float: left"
          /></a>
        </a-popconfirm>
      </div>
      <a-list
        item-layout="horizontal"
        :data-source="savePositionList"
        size="small"
        style="
          position: absolute;
          top: 26px;
          height: calc(100% - 26px);
          width: calc(100% - 20px);
          margin: 0 10px;
          font-size: 12px;
          overflow-y: auto;
        "
      >
        <a-list-item
          slot="renderItem"
          slot-scope="item"
          :style="
            'padding-top: 3px; padding-bottom: 3px; cursor: ' +
            (ptzEnable ? 'pointer' : 'default') +
            ';'
          "
        >
          <!-- <a-list-item-meta
						:description="item.pid + ' : ' + item.name"
						@click="positionChoose(item)"
					>
					</a-list-item-meta> -->
          <!-- <a-popconfirm :disabled="ptzEnable?false:true" placement="top" title="选择当前预置位?" @confirm="() => positionDelete(item)">
						<a-list-item-meta
							:description="item.pid + ' : ' + item.name"
							@click="positionChoose(item)"
						>
						</a-list-item-meta>
					</a-popconfirm> -->
          <a-popconfirm
            :disabled="ptzEnable ? false : true"
            placement="top"
            title="选择当前预置位?"
            @confirm="() => positionChoose(item)"
          >
            <a-list-item-meta :description="item.pid + ' : ' + item.name">
            </a-list-item-meta>
          </a-popconfirm>
          <div class="detailContent">
            <!-- <a @click="positionUpdate(item)"><a-icon type="environment" style="font-size: 16px;float: left;"/></a> -->

            <a-popconfirm
              :disabled="ptzEnable ? false : true"
              placement="leftBottom"
              @confirm="() => positionUpdate(item)"
              @visibleChange="(v) => visibleChange(v, item)"
            >
              <template slot="title">
                <p>修改预置位</p>
                <a-input placeholder="输入预置位名" v-model="posiName" />
              </template>
              <a :disabled="ptzEnable ? false : true"
                ><a-icon
                  type="environment"
                  style="font-size: 16px; float: left"
              /></a>
            </a-popconfirm>

            <a-popconfirm
              :disabled="ptzEnable ? false : true"
              placement="leftBottom"
              title="确定删除吗?"
              @confirm="() => positionDelete(item)"
            >
              <a :disabled="ptzEnable ? false : true"
                ><a-icon type="delete" style="font-size: 16px; float: left"
              /></a>
            </a-popconfirm>
          </div>
        </a-list-item>
      </a-list>
    </div>
  </div>
</template>

<script>
import {
  Realtime,
  queryAcquisition,
  addAcquisition,
  deleteAcquisition,
  serveAcquisition,
  editAcquisition,
} from "@/api/api";

import { get } from "lodash";
// import pick from 'lodash.pick';
// import moment from 'moment';
// import { ACCESS_TOKEN } from '@/store/mutation-types';
// import Vue from 'vue';
export default {
  name: "PanTilt",
  data() {
    return {
      title: "",
      savePositionList: [],
      speed: 0.1,
      showSpeed: true,
      posiName: "",
      saveCameraId: null,
    };
  },
  props: {
    selectItem: {
      type: Object,
      default: null,
    },
    ptzEnable: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    selectItem(val, oldUrl) {
      // this.refreshPtz();
    },
  },
  computed: {},
  created() {
    // this.query();
    // this.ptzControl()
    //  this.getSavePositionList();
  },
  methods: {
    // query(){
    // 	let postData = {
    // 		id:this.selectItem.cameraId,
    // 	}
    // 	queryAcquisition(postData).then((res) => {
    // 		console.log(res);
    // 	})
    // },
    ptzControl(key) {
      console.log(key, "幅度", this.speed);
      this.controlnum = key;
      console.log(this.controlnum);
      let postData = {
        id: this.selectItem.cameraId,
        speed: this.speed,
        direction: this.controlnum,
      };
      console.log(postData.id);
      console.log(postData);
      Realtime(postData).then((res) => {
        console.log(res);
      });
    },
    // 88
    refreshPtz() {
      // console.log('refreshPtz',this.ptzEnable);
      this.speed = 0.1;
      // 刷新预置位
      if (this.selectItem && this.selectItem.cameraId) {
        if (this.saveCameraId != this.selectItem.cameraId) {
          this.saveCameraId = this.selectItem.cameraId;

          // ptzEnable为true时 调用预置位接口
          if (this.ptzEnable == true) {
            console.log(
              "===========refreshPtz调用预置位接口======================"
            );
            this.getSavePositionList(this.selectItem.cameraId);
            return;
          }
          this.saveCameraId = null;
          this.savePositionList = [];
        } else {
          console.log("相同摄像机，不刷新预置位");
        }
      } else {
        // console.log('初始化为空')
        this.saveCameraId = null;
        this.savePositionList = [];
      }
    },

    // 预置位的接口
    getSavePositionList(cameraId) {
      console.log("获取预置位列表", cameraId);
      let postData = {
        id: this.selectItem.cameraId,
      };
      queryAcquisition(postData).then((res) => {
        this.savePositionList = res.data;
        console.log(res);
      });
      // this.savePositionList = [];

      // 接入接口
      // this.savePositionList = [
      // 	{
      // 		pid:'pid1',
      // 		name: '预置位1'
      // 	},
      // 	{
      // 		pid:'pid2',
      // 		name: '预置位2'
      // 	},
      // 	{
      // 		pid:'pid3',
      // 		name: '预置位3'
      // 	},
      // 	{
      // 		pid:'pid4',
      // 		name: '预置位4'
      // 	},
      // 	{
      // 		pid:'pid5',
      // 		name: '预置位5'
      // 	}
      // ];
    },
    visibleChange(v, pos) {
      console.log("visibleChange", pos, v);
      if (v && pos) {
        this.posiName = pos.name;
      }
    },
    positionAdd() {
      console.log("添加预置位", this.posiName);
      let postData = {
        presetname: this.posiName,
        id: this.selectItem.cameraId,
      };
      addAcquisition(postData).then((res) => {
        if (res.code == "00000") {
          console.log("添加成功");
          this.getSavePositionList();
        } else {
          console.log("添加失败");
        }
      });
    },
    positionUpdate(pos) {
      console.log("修改预置位", this.posiName, pos);
      // console.log(this.selectItem.cameraId);
      let postData = {
        // brandEnum: "DH",
        id: this.selectItem.cameraId,
        password: "",
        presetname: this.posiName,
        presettoken: pos.pid,
        username: "",
      };

      editAcquisition(postData).then((res) => {
        if (res.code == "00000") {
          console.log("修改成功");
          this.getSavePositionList();
        } else {
          console.log("修改失败");
        }
      });
    },
    positionChoose(item) {
      console.log("选择预置位", item);
      let postData = {
        presettoken: item.pid,
        id: this.selectItem.cameraId,
      };
      serveAcquisition(postData).then((res) => {
        if (res.code == "00000") {
          console.log("选择成功");
          this.getSavePositionList();
        } else {
          console.log("选择失败");
        }
      });
    },
    positionDelete(item) {
      console.log("删除预置位", item);
      let postData = {
        presettoken: item.pid,
        id: this.selectItem.cameraId,
      };
      console.log(postData);
      deleteAcquisition(postData).then((res) => {
        if (res.code == "00000") {
          console.log("删除成功");
          this.getSavePositionList();
        } else {
          console.log("删除失败");
        }
      });
    },
  },
  mounted() {
    console.log("mounted");
    this.refreshPtz();
    this.query();
    // this.ptzControl();
  },
};
</script>

<style lang="less" scoped>
.small {
  width: 40px !important;
  height: 30px !important;
  line-height: 26px !important;
  font-size: 14px !important;
}
.btn {
  position: relative;
  float: left;
  width: 84px;
  height: 50px;
  margin: 2px;
  color: #dddddd;
  line-height: 46px;
  text-align: center;
  background-color: #1b1e23;
  border: 2px solid #383d41;
  font-size: 16px;
  cursor: pointer;
}
.btn[disabled] {
  filter: brightness(0.6);
}
.btn:not([disabled]):hover {
  background-color: #3d4248;
}
.btn:not([disabled]):active {
  background-color: #111111;
}
.transparentbtn {
  width: 84px;
  height: 50px;
  float: left;
  background-color: transparent;
  border-width: 0;
  margin: 2px;
}
.arrow:after {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 22px;
  top: 50%;
  left: 50%;
  margin: -10px 0 0 -11px;
  // transform: translate(-50%, -50%);
  background: url(img/arrow.png) no-repeat 50% 50%;
}
.arrow.rotate1:after {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.arrow.rotate2:after {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.arrow.rotate3:after {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}
.arrow.rotate4:after {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}
.arrow.rotate5:after {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
.arrow.rotate6:after {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}
.arrow.rotate7:after {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.playerHeader {
  width: 100%;
  height: 20px;
  padding-left: 10px;
  background-color: #252f2e;
  border-bottom: 1px solid #383d41;
}
a {
  color: #dddddd;
}
</style>
<style lang="scss" scoped>
.ant-list-item-meta-description {
  color: #dddddd;
  font-size: 14px;
  line-height: 22px;
}
// .ant-list-sm .ant-list-item {
// 	padding-top: 3px;
// 	padding-bottom: 3px;
// 	cursor: pointer;
// }
.ant-list {
  color: #dddddd;
}
</style>